import React, {Component} from 'react';
import { Image,View, Text,StyleSheet,Dimensions,ScrollView,TouchableOpacity } from 'react-native';
import {WhiteSpace,Flex,ActivityIndicator,List,Toast,Carousel} from 'antd-mobile-rn';
import Layout from '../components/Layout';
import { post } from '../utils/request';
import SyList from '../components/SyList';
import config from '../config';
import tool from '../utils/tool';
import CImage from '../components/CImage';

export default class Home extends Component {
    //构造函数
    constructor(props) {
        super(props);
        this.state = {
            loading:false,
            videodatalist:[],
            picturedatalist:[],
            articledatalist:[],
            videolistheight:0,
        };

    }
    //组件加载
    componentDidMount() {
        let videodata=[];let picdata=[];let articledata=[];
       
        this.dataload(1,0,(r)=>{
            this.setState({videodatalist:r.data},()=>{
                this.resize();
            });
        });
        this.dataload(2,0,(r)=>{
            this.setState({picturedatalist:r.data},()=>{
                this.resize();
            });
        });
        this.dataload(3,0,(r)=>{
            this.setState({articledatalist:r.data},()=>{
                this.resize();
            });
        });
    }

    resize=()=>{
        // let node = ReactDOM.findDOMNode(this.videolist);
        // node.style.height = node.children[0].offsetHeight+10+'px';
        // node = ReactDOM.findDOMNode(this.picturelist);
        // node.style.height = node.children[0].offsetHeight+10+'px';
        // node = ReactDOM.findDOMNode(this.articlelist);
        // node.style.height = node.children[0].offsetHeight+10+'px';
    }
    

    //组件卸载
    componentWillUnmount() {
    }
    //属性改变
    componentWillReceiveProps(nextProps) {
    }

    dataload =(category,subcategory,callback)=>{
        post("/openapi/getInfoByCategory/",{
            category:category,
            subcategory:subcategory,
            pageindex:1,
            pagesize:10,
        },(r)=>{
            callback(r);
        },(e)=>{
            //Toast.fail(e.message,3);
        },(s)=>{
            this.setState({loading:s});
        });
    }

    videorenderRow = (o) => {
        let item = o.item;
        return (
            <TouchableOpacity key={"video_"+item.id} style={{backgroundColor:"white"}} onPress={()=>{
                this.props.navigation.navigate('VideoDetail',{id:item.id});
            }}>
            <Flex style={st.row}>
                <Text style={st.title} numberOfLines={1} >{item.title}</Text>
              </Flex>
            </TouchableOpacity>
        );
    }

    picturerenderRow = (o) => {
        let item = o.item;
        return (
             <TouchableOpacity key={"pictrue_"+item.id} style={{backgroundColor:"white"}} onPress={()=>{
                this.props.navigation.navigate('PictureDetail',{id:item.id});
            }}> 
            <Flex style={st.row}>
                 <Text numberOfLines={1} style={st.title} >{item.title}</Text>
            </Flex>
            </TouchableOpacity>
        );
    };

    articlerenderRow = (o) => {
        let item = o.item;
        return (
             <TouchableOpacity key={"article_"+item.id} style={{backgroundColor:"white"}} onPress={()=>{
                this.props.navigation.navigate('ArticleDetail',{id:item.id});
            }}> 
            <Flex style={st.row}>
                <Text numberOfLines={1} style={st.title} >{item.title}</Text>
            </Flex>  
            </TouchableOpacity>
        );
    };

    renderimg()
    {
        let imgs=[];
        config.siteimgurls.forEach(c=>{
            imgs.push(
                <CImage
                        key={c}
                        source={{uri:tool.getimageurl(Dimensions.get("window").width,0,1,c), cache: 'force-cache'}}
                        style={{width:Dimensions.get("window").width,height:150}}
                        defaultSource={require('../../static/imgs/image_error_small.png')}
                    />
            );
        });
       
        return imgs;
    }

    render() {
        return (
            <Layout selectedTab={"Home"} {...this.props}>
                <ScrollView style={{flex: 1}}>
                <Carousel
                    style={{}}
                    autoplay={true}
                    infinite
                    >
                    {this.renderimg()}
                 </Carousel>
                <Flex style={st.lan}><Text style={st.lantitle}>{"热门视频"}</Text></Flex>
                <SyList
                    ref={(ref)=>{this.videolist=ref}}
                    data={this.state.videodatalist}
                    renderItem={this.videorenderRow}
                    ItemSeparatorComponent={<View/>}
                />
                <WhiteSpace/>
                <Flex style={st.lan}><Text style={st.lantitle}>{"热门图片"}</Text></Flex>
                <SyList
                    ref={(ref)=>{this.picturelist=ref}}
                    data={this.state.picturedatalist}
                    renderItem={this.picturerenderRow}
                    ItemSeparatorComponent={<View/>}
                />
                <WhiteSpace/>
                <Flex style={st.lan}><Text style={st.lantitle} >{"热门文章"}</Text></Flex>
                <SyList
                    ref={(ref)=>{this.articlelist=ref}}
                    data={this.state.articledatalist}
                    renderItem={this.articlerenderRow}
                    ItemSeparatorComponent={<View/>}
                />
                <ActivityIndicator
                
                    toast
                    size="large"
                    text="数据加载中..."
                    animating={this.state.loading}
                />
                </ScrollView>
            </Layout>
            
        );
    }
}
const st = StyleSheet.create({
    row:{
        marginLeft:5,
        marginRight:5,
    },
    lan:{
         backgroundColor: "white",
         marginBottom:2.5,
         color:"black"
    },
    lantitle:{
        marginLeft:5,
        lineHeight: 25,
         fontSize: 15,
         color:"black"
    },
    title:{
        lineHeight: 25,
        fontSize: 17,
        backgroundColor: "white",
        color:"black"
    },
    view:{

    }
  });